layui.define(['element', 'edropdown', 'layer', 'util', 'form', 'fast_config', 'api', 'schema', 'resource_tree', 'publish', 'enav', 'listener', 'econsole'], function (exports) {
    "use strict";

    /**
     * Button component
     * */
    var MOD_NAME = 'editor',
        $ = layui.jquery,
        element = layui.element,
        layer = layui.layer,
        form = layui.form,
        util = layui.util,
        utils = layui.utils,
        api = layui.api,
        publish = layui.publish,
        enav = layui.enav,
        contentElem = '#fast-body',
        listener = layui.listener,
        resource_tree = layui.resource_tree,
        modelTree,
        fast_config = layui.fast_config,
        econsole = layui.econsole;
    console.log(econsole, 'econsole')


    var editor = function (opt) {
        this.option = opt;
    };

    function appendResourceTreeContentDom(defaultShow, settings) {
        var classShow;
        if (defaultShow) {
            classShow = 'layui-show';
        }

        return `
            <div class="layui-tab-item ${classShow}" >
                <ul class="ztree" id="${settings.elem.slice(1)}"></ul>
            </div>
        `
    }

    function appendResourceTreeTitleDom(defaultShow, settings, isResponsive = true) {
        // console.log('123321', document.getElementByClass("layui-tab-bar"))
        var classShow;
        if (defaultShow) {
            classShow = 'class="layui-this"';
        }
        if (isResponsive) {
            // 响应式
            return `
            <li style="width:${settings.width}; border-right:none" ${classShow}><span style="width:100%"><i class="${settings.icon}"></i></span><span style="width:100%">${settings.title}</span></li>
        `
        } else {
            // 非响应式
            return `
            <li style="width:100px; " ${classShow}><span style="width:100%"><i class="${settings.icon}"></i></span><span style="width:100%">${settings.title}</span></li>
        `
        }
    }

    function appendElem(option) {
        var resourceTreesContentDom = '';
        var resourceTreesTitleDom = '';
        $.each(option.resource_trees_settings, function (index, settings) {
            if (index == 0) {
                resourceTreesContentDom += appendResourceTreeContentDom(true, settings);
                resourceTreesTitleDom += appendResourceTreeTitleDom(true, settings, option.isResponsive);
            } else {
                resourceTreesContentDom += appendResourceTreeContentDom(false, settings);
                resourceTreesTitleDom += appendResourceTreeTitleDom(false, settings, option.isResponsive);
            }
        })

        var sideBox = `
        <div class="box">
            <div class="box1">
                <div class="layui-side-scroll">
                    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <ul class="layui-tab-title">
                            ${resourceTreesTitleDom}
                        </ul>
                        <div class="layui-tab-content">
                            ${resourceTreesContentDom}
                          </div>
                        <!--<div class="layui-tab-content"></div>-->
                    </div>
                    <!--<div id="resource"></div>-->
                </div>
            </div>
            <div class="box2" id="left">
                <div class="properties-drag"></div>
                <div class="content">
                
                    <div class="layui-row" id="viewFormContainer">
                   
                    </div>
                </div>

            </div>
        </div>
		`;

        $(option.elem).append(sideBox);
    }

    // 浮点数转百分数
    function toPercent(point) {
        var str = Number(point * 100).toFixed(1);
        str += "%";
        return str;
    }



    /**
     * Button start loading
     * */
    editor.prototype.render = function (opt) {


        var option = {
            elem: opt.elem,
            funcAmis: null,
            resource_trees_settings: opt.resource_trees_settings,
            enav_setting: opt.enav_setting,
            isResponsive: opt.isResponsive,
        }

        // 根据菜单栏个数分配宽度
        option.resource_trees_settings.forEach((item) => {
            let width = 1 / option.resource_trees_settings.length
            width = toPercent(width).toString()
            item.width = `calc(${width} + 1px)`
        })

        appendElem(option);

        $.each(option.resource_trees_settings, function (index, settings) {
            resource_tree.render(settings);
            utils.contextData.trees_settings[settings.elem.slice(1)] = settings;
        })




        enav.render(option.enav_setting)
        // econsole.render({
        //     elem: 'console-content'
        // })

        var enav_elem = option.enav_setting.elem;

        /**
         * 扩展_单击树监听器
         * @param {} event 
         * @param {*} treeId 
         * @param {*} treeNode 
         */
        function extention_resourceTreeClickListener(event, treeId, treeNode, option) {
            //debugger
            enav.render({
                elem: enav_elem,
                data: treeNode.getPath()
            });
        }
        listener.registerResourceTreeClickListener('extention_resourceTreeClickListener', extention_resourceTreeClickListener);

        return new editor(option);
    }

    //头部事件
    util.event('lay-header-event', {
        //左侧菜单事件
        menuLeft: function (othis) {
            layer.msg('展开左侧菜单的操作', {
                icon: 0
            });
        },
        menuRight: function () {
            layer.open({
                type: 1,
                content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                area: ['360px', '100%'],
                offset: 'rt' //右上角
                    ,
                anim: 5,
                shadeClose: true
            });
        }
    });





    exports(MOD_NAME, new editor());
});